<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>等比例换算</title>
	<meta name="keywords" content="等比例换算,在线等比例换算,在线图片等比例缩放,等比例缩放" />
	<meta name="description" content="等比例换算,在线等比例换算,在线图片等比例缩放,等比例缩放" />
	<script src="../yzm_tool/file/js/jquery.min.2.1.4.js"></script>
	<script src="../yzm_tool/js/vue.min.js"></script>
	<style>
		*,*:before,*:after{box-sizing:border-box;}
		html,body{margin:0;padding:0;width:100%;}
		body{font-size:16px;font-family:"Microsoft YaHei",Helvetica,"SimSun",Arial,sans-serif;}
		ul,li {
		    list-style: none;
		    margin: 0;
		    padding: 0;
		}

		p {
		    margin: 0;
		    padding: 0;
		}
		.header h4 {
		    text-align: center;
		    margin: 0;
		    padding: 20px 0;
		    margin-bottom: 10px;
		    font-size: 22px;
		}

		.main {
		    max-width: 750px;
	        margin-left: auto;
	        margin-right: auto;
	        border: 2px solid #4CAF50;
	        padding: 30px 15px;
		}

		.main ul {
		    display: flex;
		    justify-content: space-between;
		}

		.main ul li {
		    width: 46%;
		}

		input[type=text] {
		    display: inline-block;
		    width: 100%;
		    border: 1px solid #009688;
		    height: 34px;
		    line-height: 34px;
		    font-size: 16px;
		    transition: .3s;
		    padding: 2px 10px;
		}

		input[type=text]:focus {
		    outline: none;
		    box-shadow: 0 0 3px 0px rgb(0 150 136 / 38%);
		}

		.main ul li .p1 {
		    font-weight: bold;
		    margin-bottom: 8px;
		}
		.main .ul2 {
		    margin-top: 30px;
		    border-top: 1px solid #e4e4e4;
		    padding-top: 15px;
		}

		.main ul li .p1 span {
		    color: #dadada;
		    font-weight: normal;
		    margin-left: 4px;
		}



		
	</style>
	
	
</head>
<body>

<div class="container">
	<div class="header">
		<h4>等比例换算工具</h4>
	</div>
	<div class="main" id="jsdbl">

		<ul class="ul1">
			<li>
				<p class="p1">原尺寸宽度<span>width</span></p>
				<p class="p2"><input type="text" v-model="width" class="andy_input"></p>
			</li>
			<li>
				<p class="p1">原尺寸高度<span>height</span></p>
				<p class="p2"><input type="text" v-model="height" class="andy_input"></p>
			</li>
		</ul>
		<ul class="ul2">
			<li>
				<p class="p1">等比例尺寸宽度<span>width</span></p>
				<p class="p2"><input type="text" v-model="calc_v_width" class="andy_input"></p>
			</li>
			<li>
				<p class="p1">等比例尺寸高度<span>height</span></p>
				<p class="p2"><input type="text" v-model="calc_v_height" class="andy_input"></p>
			</li>
		</ul>
	</div>
</div>

<script>
window.onload=function(){
	var vm = new Vue({
		el:'#jsdbl',
		data:{
			width:640,
			height:640,
			v_width:500,
			v_height:500,
		},
		computed:{
			calc_v_height:{
				get:function(){
					var bi =  this.width / this.height;
					var r = Math.round(this.v_width / bi);
					return r;
					
				},
				set:function (newValue) {
					var t = newValue;
					this.v_height = newValue;
					this.v_width = t*(this.width / this.height);
				}
			},
			calc_v_width:{
				get:function(){
					var bi =  this.width / this.height;
					var r = Math.round(this.v_height * bi);
					return r;
				},
				set: function (newValue) {
					var t = newValue;
					this.v_width = newValue;
					this.v_height = t/(this.width / this.height);
				}

			}
		}
	});
}

</script>
</body>
</html>